import React from "react";
import {Link} from "react-router";
import {Table, Card, Menu, Dropdown, Icon, Modal, message, Tag, Input, Button, Row, Col, Tabs, Select} from 'antd';
import BreadcrumbCustom from "../BreadcrumbCustom";
import App from "../../common/App.jsx";
import U from "../../utils";
import Utils from "../../common/Utils";
import "../../assets/css/users/users.less";

const URL = {
    list: 'adm/apply/list',
    key: 'applyId',
    update: 'adm/apply/process',
    first: '员工管理',
    second: "",
    addStaff:'/app/staffMange/entering' // 录入员工路由
};

const Search = Input.Search;
const Option = Select.Option;
export default class Staffs extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            dataSource: [],
            remarkVisible: false,
            remark: '',
            pagination: {pageSize: 10, current: U.page.getCurrentPage(), total: 0},
            columns: [
                {
                    title: "工号",
                    dataIndex: "name",
                    key: "name",
                },
                {
                    title: "姓名",
                    dataIndex: "name",
                    key: "name",
                },
                {
                    title: "职位",
                    dataIndex: "job",
                    key: "job",
                },
                {
                    title: "城市",
                    dataIndex: "city",
                    key: "city"
                },
                {
                    title: "联系电话",
                    dataIndex: "mobile",
                    key: "mobile",
                },
                {
                    title: "进行中订单",
                    dataIndex: "appendOdr",
                    key: "appendOdr",
                },{
                    title: "已完成订单",
                    dataIndex: "finishOdr",
                    key: "finishOdr",
                },
                {
                    title: "注册时间",
                    dataIndex: "regTime",
                    key: "regTime",
                },
                {
                    title: "操作",
                    dataIndex: "option",
                    key: "option",
                    width: 200,
                    render: (col, record, i) => (
                        <Dropdown overlay={<Menu>
                            <Menu.Item key="0">
                                <a onClick={() => this.Detail(record)}> 查看详情 </a>
                            </Menu.Item>
                            <Menu.Item key="1">
                                <a onClick={() => this.changeInfo(record)}> 修改信息 </a>
                            </Menu.Item>
                            <Menu.Item key="2">
                                <a onClick={() => this.resetPwd(record)}> 重置密码 </a>
                            </Menu.Item>
                        </Menu>} trigger={['click']}>
                            <a className="ant-dropdown-link" href="javascript:;">
                                操作<Icon type="down"/>
                            </a>
                        </Dropdown>
                    )
                }
            ],
            cityList:[],
            shopList:[],
            isCity: null,
            isShop: null,
        };
    }


    componentDidMount() {
        this.loadData();
    }


    loadData = () => {
        let _this = this;
        _this.setState({loading: true});
        let p = _this.state.pagination;
        App.api(URL.list, {
            countTotal: true,
            offset: (this.state.pagination.current - 1) * (this.state.pagination.pageSize),
            limit: p.pageSize
        }).then(function (result) {
            let pager = U.pager.convertOffset2Page(result);
            pager.current = p.current;
            _this.setState({
                dataSource: result.items,
                pagination: pager,
                loading: false
            });
        });
    };

    // tab切换
    TabClick = (key) => {
        this.setState({
            pagination:{

            }
        },()=>this.loadData())
    }

    // 获取全国信息
    hasCity = () => {
        App.api('xxx/xxx', {
        }).then(function (result) {

        })
    }

    // 选择城市范围
    handleChangeCity = () => {

    }

    // 选择店铺范围
    handleChangeShop = () => {

    }

    // 获取店铺信息
    hasShop = () => {
        App.api('xxx/xxx', {
        }).then(function (result) {

        })
    }

    handleTableChange = (pagination) => {
        this.setState({
            pagination: pagination
        }, () => this.loadData());
    };

    // 修改信息
    changeInfo = () => {
        let url_api = 'xxx/xxx';
        App.api(url_api, {
            // 入参
        }).then((result) => {
            // 
            this.loadData()
        });
    }

    // 重置密码
    resetPwd = () => {
        let url_api = 'xxx/xxx';
        App.api(url_api, {
            // 入参
        }).then((result) => {
            // 
            this.loadData()
        });
    }

    // 查看员工详细信息
    Detail = (user) => {
        Utils.user.staffDetail(user);
    }

    render() {
        const {columns, dataSource, pagination:{total, pageSize, offset, current}} = this.state;
        const TabPane = Tabs.TabPane;
        const pagination = {
            total: total,
            current,
            pageSize: pageSize,
            showSizeChanger: true
        };
        return (
            <div>
                <BreadcrumbCustom first={URL.first} second={URL.second}/>
                <Card>
                    <div>
                        <Row>
                            <Col span={12} offset={0}>
                                <Search
                                    placeholder="请输入员工姓名"
                                    onSearch={value => console.log(value)}
                                    style={{ width: '260px',height:'30px' ,marginRight:'12px'}}
                                    />
                                <Button
                                    style={{width:'92px', height:'30px'}}
                                    size={"large"}
                                    type={"primary"}
                                    onClick={() => {
                                        this.props.router.push(URL.addStaff);
                                    }}
                                >
                                    录入员工
                                </Button>
                            </Col>
                            <Col span={12} style={{position: 'relative'}}>
                                <Select defaultValue="all" style={{ width: '143px', height: '30px', position:'absolute', right:0, top: 0}} onChange={(value)=>this.handleChangeCity(value)}>
                                    <Option value="all">全国</Option>
                                </Select>
                            </Col>
                        </Row>
                        <br></br>
                    </div>
                    <Tabs defaultActiveKey="1">
                        <TabPane tab="全部员工" key="1" onTabClick={()=>this.TabClick(1)}></TabPane>
                        <TabPane tab="销售" key="2" onTabClick={()=>this.TabClick(2)}></TabPane>
                        <TabPane tab="工匠" key="3" onTabClick={()=>this.TabClick(3)}></TabPane>                    
                    </Tabs>
                    <Modal
                        title={'修改备注'}
                        onCancel={() => {
                            this.setState({
                                remark: '',
                                id: null,
                                remarkVisible: false,
                            })
                        }}
                        onOk={() => {
                            App.api('adm/apply/note', {
                                [URL.key]: this.state.id,
                                notes: this.state.remark,
                            }).then(() => {
                                message.success('添加备注成功');
                                this.setState({
                                    remark: '',
                                    remarkVisible: false,
                                })
                            })
                        }}
                        visible={this.state.remarkVisible}>
                        <Input
                            placeholder="输入备注"
                            value={this.state.remark}
                            onChange={(e) => {
                                this.setState({
                                    remark: e.target.value,
                                })
                            }}/>
                    </Modal>
                    <Table
                        rowKey={row => row.id}
                        columns={columns}
                        dataSource={dataSource}
                        pagination={pagination}
                        onChange={this.handleTableChange}
                        loading={this.state.loading}
                        scroll={{
                            x: columns
                                .map(({width}) => width || 100)
                                .reduce((l, f) => l + f)
                        }}
                    />
                </Card>
            </div>
        );
    }
}
